﻿<div class="layui-card" id="lg-ActivityAdd">
    <div class="layui-card-header">
        <i class="fa fa-home fa-fw"></i>添加活动
        <div class="f-r">
            <button class="layui-btn layui-btn-primary layui-btn-sm" v-on:click="back()"><i class="fa fa-mail-reply fa-fw"></i>返回</button>
        </div>
    </div>
    <div class="layui-card-body" id="">
        <div class="layui-form-item">
            <form class="layui-form layui-form-pane" action="" id="fm_AddActivity" lay-filter="fm_AddActivity">
                <div class="layui-form-item">
                    <label class="layui-form-label"><i style="color:#f00">*</i>活动名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="Title" class="layui-input" placeholder="填写活动名称" lay-verify="required" />
                    </div>
                </div>
               
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">活动简介</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" name="Intro" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i style="color:#f00">*</i>表单模版</label>
                    <div class="layui-input-block">
                        <select name="FormId" lay-verify="required">
                            <option value=""></option>
                            <option :value="item.Value" v-for="item in form.options">{{item.Text}}</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><i style="color:#f00">*</i>报名起始</label>
                        <div class="layui-input-block">
                            <input type="text" name="StartTime" id="StartTime" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label"><i style="color:#f00">*</i>报名截止</label>
                        <div class="layui-input-block">
                            <input type="text" name="EndTime" id="EndTime" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i style="color:#f00">*</i>人数限制</label>
                    <div class="layui-input-block">
                        <input type="text" name="Limit" class="layui-input" placeholder="" value="0" lay-verify="required" />
                    </div>
                    <blockquote class="layui-elem-quote" style="margin-top:2px">0 为不限制人数</blockquote>
                </div>
                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">活动状态</label>
                    <div class="layui-input-block">
                        <input type="checkbox" checked="" name="IsOpen" value="1" lay-skin="switch" lay-filter="IsOpen" lay-text="开放|关闭">
                    </div>
                </div>
                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">短信状态</label>
                    <div class="layui-input-block">
                        <input type="checkbox" checked="" name="IsSendSms" value="1" lay-skin="switch" lay-filter="IsSendSms" lay-text="启用|关闭">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text" v-show="show">
                    <label class="layui-form-label">短信内容</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" name="SmsText" class="layui-textarea"></textarea>
                    </div>
                    <blockquote class="layui-elem-quote" style="margin-top:2px">内容为空则使用默认模板内容</blockquote>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="bt_AddActivity">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
        <!-- 内容主体区域结束 -->
    </div>
</div>
<script>
    frame.createPage({
        mounted: function() {
            var page = this;
            page.vm = Vue.createApp({
                data() {
                    return {
                        show: true,
                        form:{
                            options:[]
                        }
                    }
                },
                mounted: async function() {
                    await this.GetFormsForOption();
                    this.FormRander();
                },
                methods: {
                    back: function() {
                        frame.Back(page.url, res => {
                            res.reload()
                        })
                    },
                    GetFormsForOption: async function () {
                        await lg.requestAsync({
                            url: "/api/sys/reserve/GetFormsForOption",
                            method: "post"
                        }).then(res => {
                            if (res.code == 0) {
                                this.form.options = res.data;
                            }
                        })
                    },
                    FormRander: function() {
                        layui.use(['form', 'laydate'], function() {
                            var form = layui.form
                                , laydate = layui.laydate;
                            //日期
                            laydate.render({
                                elem: '#StartTime'
                            });
                            laydate.render({
                                elem: '#EndTime'
                            });
                            form.render();
                            form.on('switch(IsSendSms)', function(d) {
                                if (d.elem.checked) {
                                    page.vm.show = true;
                                } else {
                                    page.vm.show = false;
                                }
                            });
                            form.on('submit(bt_AddActivity)', function(d) {
                                var data = d.field;
                                if (!data.IsOpen) {
                                    data.IsOpen = 0
                                }
                                if (!data.IsSendSms) {
                                    data.IsSendSms = 0
                                }
                                lg.request({
                                    url: "/api/sys/reserve/AddActivity",
                                    method: "post",
                                    data: data,
                                    success: res => {
                                        if (res.code == 0) {
                                            layer.msg("添加成功！", { icon: 1 });
                                            page.vm.back();
                                        } else {
                                            layer.msg(res.msg, { icon: 2 })
                                        }
                                    }
                                })
                                return false;
                            })
                        })
                    },
                }
            }).mount("#lg-ActivityAdd")
        },
    }).mount();
</script>
